define(['jquery', 'bootstrap', 'backend','frontend', 'form', 'template','highcharts','echarts'], function ($, undefined,Backend, Frontend, Form, Template, Highcharts,Echarts){
    var Controller = {
      index: function(){
        setInterval(function(){
                Controller.getDate()
				}, 1000);  

		//大屏首页综合质量
		Controller.comprehensive();
		Controller.top();
		Controller.flow();
		Controller.get_app();
		Controller.app_quality();
		Controller.basedlink();
	

		//页面要求1个小时刷新一次刷新一次
		setInterval(function(){
			location.replace(location.href);
		},3600000);  
	  },
	  

	  top: function(){
				//top10
				var chart = Highcharts.chart('container', {
					chart: {
					type: 'bar',
					height: 570,
					backgroundColor: 'rgba(0,0,0,0)'
					},
					exporting: { 
					enabled: false 
					},
					credits: { 
					enabled: false 
					},
					//启用或禁用图列
					legend: {
					enabled: false 
					},
					title: {
					text: 'TOP应用',
					style: {
						fontSize: '28px',
						fontWeight: 900,
						color: '#fff'
					}
					},
					xAxis: {
					categories: [],
					title: {
						text: null
					},
					labels: {
						style:{ // 此处可设置样式
							color: '#fff',
						}
					},
					
					},
					yAxis: {
					min: 0,
					title: {
						text: '流量(G)',
						style:{
							color: '#fff',
						}
					},
					labels: {
						overflow: 'justify',
						style:{ // 此处可设置样式
							color: '#fff',
						}
					},
					gridLineColor: '#72BFB2',
					gridLineWidth: 2
					},
					plotOptions: {
					//下面这个是开启柱形图上面的文字
					// bar: {
					// 	dataLabels: {
					// 	enabled: true,
					// 	allowOverlap: true  允许数据标签重叠
					// 	}
					// },
					series: {
					color: '#69F2F2'
					}
					},
					series: [{
					name: '流量(G)',
					data: []
					}]
				});
				$.ajax({ 
					url: "/index/home/info", 
					type: 'post',
					dataType: 'json',
					success: function(res){
					var d = JSON.parse(res);
					if(d.code == 401){
						Backend.api.toastr.error(d.msg);
						return false;
					}
					if(d.code == 0 || d.code == 403){
						// alert(msg);
						options = {
							positionClass: "toast-top-center",
						};
						Backend.api.toastr.error(data.msg,'',options);
						return false;
					}
					var datas = d.data;
					//console.log(datas);
					var categories=[];
					var data = [];
					for(var i = 0; i<datas.length;i++){
						var register = datas[i].name;
						var value = Number(datas[i].value)/1024/1024/1024;
						value = value.toFixed(2);
						categories[i] = register;
						data[i] = Number(value);
					}
					chart.xAxis[0].setCategories(categories);
					chart.series[0].setData(data);
					} 
				});
	  },

	  //24小时流量趋势图
	  flow: function(){
		$.ajax({
			url: '/index/home/new_flow',
			type:'post',
			dataType:'json',
			success:function(json){              
				var data = JSON.parse(json)
				if(data.code == 401){
				Backend.api.toastr.error(data.msg);
				//return false;
			}
			if(data.code == 0 || data.code == 403){
				options = {
					positionClass: "toast-top-center",
				};
				Backend.api.toastr.error(data.msg,'',options);
				//return false;
			}
			var time = []
				up   = []
				down = []
			for(var index in data.data){
				var art = new Date(data.data[index].key)
					row = art.getHours()+':'+art.getMinutes()
					up_flow =  Number((data.data[index].up.value / 1024 /1024).toFixed(2))
					down_flow = Number((data.data[index].down.value / 1024 /1024).toFixed(2))
				time.push(row);
				up.push(up_flow);
				down.push(down_flow);
			}

			Highcharts.chart('containers',{
				chart: {
				type: 'areaspline',
				height: 292,
				backgroundColor: 'rgba(0,0,0,0)'
				},
				title: {
				text: '24小时流量趋势图',
				style: {
					fontSize: '17px',
					fontWeight: 900,
					color: '#fff'
				}
				},

				legend: {
				//enabled: false,
				layout: 'vertical',
				align: 'left',
				verticalAlign: 'top',
				x: 150,
				y: 100,
				floating: true,
				borderWidth: 1,
				backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
				},

				xAxis: {
				categories: time,
				tickWidth:0,//去掉刻度
				labels:{
					style:{ // 此处可设置样式
						color: '#fff',
					}
				}
				},
				yAxis: {
				gridLineWidth: 0,//去掉y轴方向的横线
				title: {
					text: 'bits/s',
					style:{
						color: '#fff',
					}
				},
				labels: {
					formatter: function () {
					return this.value+'M';
					},
					style:{
						color: '#fff',
					}
				}
				},
				credits: {
				enabled: false
				},
				tooltip: {
				crosshairs: true,
				shared: true
				},
				plotOptions: {
				spline: {
					marker: {
					radius: 4,
					lineColor: '#666666',
					lineWidth: 1
					}
				}
				},
				series: [{
				name: '下行流量',
				data: down
				}, {
				name: '上行流量',
				data: up
				}]

			})

			}
		});
	  },



		//关键应用质量
		get_app: function(){
			$.ajax({
				url: '/index/appquality/main_app',
				type:'post',
				dataType:'json',
				success:function(json){
					var data = JSON.parse(json);
					console.log(data);
					if(data.code == 401){
						Backend.api.toastr.error(data.msg);
						return false;
					}
					if(data.code == 0 || data.code == 403){
						// alert(msg);
						options = {
							positionClass: "toast-top-center",
						};
						Backend.api.toastr.error(data.msg,'',options);
						return false;
					}
					//console.log(data);
					//获取div向内填充数据
					//var length = Object.keys(data.data);
					for (var index in data.data) {
						var list = data.data[index].list;
						if(data.data[index].name != '游戏'){
							if(list != undefined){
								if(list.length > 0){
									$('#app_flow').append(
										'<div class="col-md-4" style="width: 100%; height: 140px;">'+
										'<div class="app" id="app_'+index+'">'+
										'<div class="u13"><span style="font-size: 18px">'+data.data[index].name+'</span></div>'+
										'<div class="u14">'+
										'<img src="'+data.data[index].icon+'" id="u17" style="max-width:50px;max-height:50px">'+'</div>'+
										'</div>'+'</div>'
									);
									for(var i in list){
										var level = list[i].level;
											val = Math.round(list[i].qualityScore);
											img  =  ''
											switch (level) {
												case '好':
														img = '/assets/img/frontend/screen/u60.png'
													break;
												case '较好':
														img = '/assets/img/frontend/screen/u84.png'
													break;
												case '警告':
														img = '/assets/img/frontend/screen/u70.png'
													break;
												case '较差':
														img = '/assets/img/frontend/screen/u68.png'
													break;
												default:
														img = '/assets/img/frontend/screen/u82.png'
													break;
											}
										$('#app_'+index).append(
											'<div class="u14">'+'<li>'+'<div class="u16" title="'+list[i].name+'">'+list[i].name+'</div>'+
											'</li><li>'+'<img src="'+img+'">'+
											'<div style="margin-left: 19px">'+val+'分'+'</div>'+
											'</li></div>'
										);
									}
								}		
							}
						}
						
					}
				}
			});
		},


		//基础质量链路图
		basedlink: function () {
			$.ajax({
				url: '/index/quality/basedlink',
				type:'post',
				data: {propertyname: 'basedlink'},
				dataType:'json',
				success:function(json){                 
					Controller.piechart(json, "qualityScore", "basedlink");                    
				}
			});
		},


		//应用质量分数
		app_quality: function(){
			//Controller.fraction('picture_1','视频音乐',80);
			$.ajax({
				url: '/index/screen/app_quality',
				type:'post',
				dataType:'json',
				success:function(json){                 
					var json = JSON.parse(json);
					for(let index in json){
						if(json[index].code == 401){
							Backend.api.toastr.error(json[index].msg);
							continue;
						}
						if(json[index].code == 0 || json[index].code == 403){
						  options = {
							  positionClass: "toast-top-center",
						  };
						  Backend.api.toastr.error(json[index].msg,'',options);
						  continue;
						}
						var id = Number(index) + 1;
							val = Math.round(json[index].data);
						if(val == -1){
							val = 0
						}
						row = ['视频','公有云','网页','下载'];
						Controller.fraction('picture_'+id,row[index],val);
					}			 
					//console.log(json)
				}
			});
		},


		//大屏首页综合质量
		comprehensive: function(){
			$.ajax({
				url: '/index/home/comprehensive',
				type:'post',
				dataType:'json',
				success:function(json){        
						Controller.rendering(json);
				}
			});
		},

		rendering: function(json){

			var json = JSON.parse(json)
			//console.log(json);
			if(json.code == 401){
				Backend.api.toastr.error(json.msg);
				return false;
			}
			if(json.code == 0 || json.code == 403){
			  $("#u38 span").html(0);
			  $("#u39 span").html(0);
			  $("#u40 span").html(0);
			  options = {
				  positionClass: "toast-top-center",
			  };
			  Backend.api.toastr.error(json.msg,'',options);
			  return false;
			}
			  var app_qualitys = Math.round(json.data.app_quality);
			      link_quality = Math.round(json.data.link_quality)
			  if(app_qualitys === -1){
				  app_qualitys= 0
			  }
			  if(link_quality == -1){
				link_quality = 0
			  }
			  if(json.data.breakdown > 120){
				json.data.breakdown = 120
			  }
			  $("#u38 span").html(link_quality);
			  $("#u39 span").html(app_qualitys);
			  $("#u40 span").html(json.data.breakdown);
			switch(json.data.breakdown_quality){
				case '优' :
				$(".chart_3").css("background","#336633");
				break;
				case '良' :
				$(".chart_3").css("background","#dea32c");
				break;
				case '差' :
				$(".chart_3").css("background","#c85d44");
				break;
				default :
				$(".chart_3").css("background","#b22c46");
			}  
		},
		


		
		fraction: function(id,name,val){
			var myChart = Echarts.init(document.getElementById(id));

			option = {
				tooltip : {
					formatter: "{a} <br/>{b} : {c}分"
				},
				series: [
					{
						name: '质量分',
						type: 'gauge',
						detail: {
							formatter:'{value}',
							textStyle: {
                                color: 'pink',
								fontSize: 20,
								fontWeight: 400,
                                fontFamily: 'Microsoft YaHei',
                            }
						},
						tooltip:{
							show: false
						},
						axisLine: {            // 坐标轴线  
							lineStyle: {       // 属性lineStyle控制线条样式  
								color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']],
								width: 5
								}  
						},
						axisTick: {            // 坐标轴小标记
							length:0,        // 属性length控制线长
							lineStyle: {       // 属性lineStyle控制线条样式
								color: 'auto'
							}
						},
						splitLine: {           // 分隔线
							length:10,         // 属性length控制线长
							lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
								color: 'auto'
							}
						},
						pointer: {
							width:4
						},
						title: {
							show: true,
							offsetCenter: [0, '110%'],       // x, y，单位px
							textStyle: {
                                color: '#fff',
								fontSize: 20,
								fontWeight: 700,
                                fontFamily: 'Microsoft YaHei',
							},
						},
						data: [{value: val, name: name}]
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
				   //若有多个echarts实例(响应式布局)
				   
				$(window).resize(function(){
					myChart.resize();
				})
		},




		piechart: function(json, type, id){ //画图 饼图/趋势图   数据   类型(画图的字段后期可扩展)  id
			var toolTipValue="";
			var text = "";
			if(id == 'basedlink'){
				text = '基础链路';
			}
			if(type == "qualityScore"){
				text += '质量';
				toolTipValue = "质量分";
			}
		
			if(json.code == 401){
				Backend.api.toastr.error(json.msg);
				window.location.href='/index/user/login';
				return false;
			}
		
			if(json.code == 0 || json.code == 403){
				// alert(msg);
				options = {
					positionClass: "toast-top-center",
				};
				Backend.api.toastr.error(text+json.msg,'',options);
				return false;
			}
			Highcharts.chart(id, {
				chart: {
					height: 640,
					backgroundColor: 'rgba(0,0,0,0)'
				},
				title: {
					text: text,
					style: {
						fontSize: '28px',
						fontWeight: 700,
						color: '#fff'
					}
				},
				colors:[
					'#6d8346',//线条颜色
				],
				credits: {
					enabled: false
				},           
				xAxis: {
					//tickInterval: -2,//刻度的宽度,
					categories : json.xAxis,
					labels:{
						x:15,
						style:{ // 此处可设置样式
							color: '#fff',
						}
					},
				},
				yAxis: {
					title: {
						text: null,
					},
					labels: {
						formatter:function(){
							return this.value;
						},
						style:{ // 此处可设置样式
						color: '#fff',
						}
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}],
					// min:0,
					//tickInterval: 5//刻度的宽度       
					tickPositions: [0, 20, 40, 60, 80,100] // 指定竖轴坐标点的值         
				},
				legend: {
					//enabled: false   //隐藏图例
					itemStyle: {
						color: '#fff'
					}
				},
				tooltip : {
					formatter : function() {
						if(type=="001"&&id=="blankScreen"){
							if(this.point.y=="0.00"){
								return '<b>' + this.series.name + '</b><br>时间:' + this.key + '<br>'+toolTipValue+'：' + "否";
							}else{
								return '<b>' + this.series.name + '</b><br>时间:' + this.key + '<br>'+toolTipValue+'：' + "是";
							}
						}
						else
							return '<b>' + this.series.name + '</b><br>时间:' + this.key + '<br>'+toolTipValue+'：' + this.point.y;
					}
				},                    
				// series:[{
				//     seriesshowInLegend: false,   //隐藏数据名称
				//     type :'area',
				//     name:'网信',
				//     data:json.series
				// }]
				series: json.series
			});            
		},
		
		getDate:function(){
			var today = new Date();  
			var date = today.getFullYear() + "-" + Controller.twoDigits(today.getMonth() + 1) + "-" + Controller.twoDigits(today.getDate()) + " ";  
			var week = " 星期" + "日一二三四五六 ".charAt(today.getDay());  
			var time = Controller.twoDigits(today.getHours()) + ": " + Controller.twoDigits(today.getMinutes()) + ": " + Controller.twoDigits(today.getSeconds());
			$("#time_span").text(date +" "+time);
		},

		twoDigits:function(val){
			if (val < 10) return "0" + val; return val;
		},

  
    }
  
  
  
  
  
  
    return Controller;
  });
  